//1.找到图片
let image = $('#image');
//2.剪裁配置项
let option = {
  //剪裁比例
  aspectRatio: 1,
  //指定预览区
  preview: '.img-preview'
}
//3.cropper方法
image.cropper(option)


// 点击上传触发文件域单击事件
$('button:contains("上传")').on('click', function () {
  $('#file').trigger('click');
})

//------------------选择图片，更换剪裁区图片-----------------
$('#file').on('change', function () {
  // 获取图片url地址
  if (this.files.length > 0) {
    // 1.找到文件对象
    let fileObj = this.files[0];
    // 2. 创建url
    let url = URL.createObjectURL(fileObj);
    // console.log(url);
    // 更换剪裁区的图片
    // image.cropper('destroy').attr('src', url).cropper(option);
    image.cropper('replace', url);
  }
})

//---------------完成更换--------------
// 点击确定按钮 ---> 剪裁图片 ---> 转换成base64格式 ---> 提交给接口
$('button:contains("确定")').on('click', function () {
  // 剪裁图片
  let canvas = image.cropper('getCroppedCanvas', { width: 30, height: 30 });
  let base64 = canvas.toDataURL('image/jpeg', 0.3);

  axios.post('/my/user/avatar', `avatar=${encodeURIComponent(base64)}`).then(res => {
    let { status, message } = res.data;
    if (status === 0) {
      layer.msg(message);
      // 更换头像，更新父页面（index.html）的头像
      window.parent.getUserInfo();
    }
  })
})